<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .toolbar {
            position: fixed;
            width: 50px;
            height: 50px;
            right: 30px;
            bottom: 100px;
			background: url(images/toolbar.png) no-repeat 0 -6px;
			cursor:pointer;
			transform: all .4s;
			overflow: hidden;
			display: none;
        }
        
        .container {
            width: 1200px;
            height: 1000px;
			margin:0 auto;
			margin-top:400px;
			border:1px solid red;
        }
		.container img{width:100%;}
		.toolbar:hover{
			background-position: 0 -68px;
		}
    </style>
    <script src="js/jquery2.1.4.min.js"></script>
</head>

<body>
	<div class="toolbar goback"></div>
    <div class="container"><img src="images/mainbg.png" alt=""></div>
	<script type="text/javascript">
		$(function(){
			console.log('over...');
			//获取main区域到文档顶部的距离
			var mainTop = $('.container').offset().top;
			console.log(mainTop);
			//滚动事件
			$(window).scroll(function(){
				console.log('scroll...');
				var docTop = $(document).scrollTop();
				console.log(docTop);
				//进入main地界了
				if(docTop>=mainTop){
					$('.goback').fadeIn('slow');
				}else{
					$('.goback').fadeOut('slow');
				}
				
			});
			
			//点击事件
			$('.goback').click(function(){
				//html,body
				$('html,body').animate({
					scrollTop:0
				},600);
			});
		});
	</script>
</body>

</html>